<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2021/5/28
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" >
    <title>聊天室</title>
    <style>
        .container {
            width: 600px;
            margin: 0 auto;
            background-color: #ccc;
        }

        .msg-content {
            height: 400px;
            background-color: pink;
            margin: 5px 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .msg {
            background-color: #ffadbb;
            margin: 5px 2px;
        }
        .msg .user {
            margin-bottom: 3px;
            font-weight: bold;
        }
        .msg .txt {
            font-size: 18px;
            word-wrap: break-word;
        }
        .msg-content .self {
            background-color: #ff6f5c;
        }

        .input-div form {
            display: flex;
            height: 30px;
            justify-content: flex-end;
        }
        .input-div form [name="msg"] {
            flex: 1;
        }
        .input-div form button {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>聊天室</h2>
    <div>
        <div class="msg-content" >
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg self" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
            <div class="msg" >
                <div class="user" >
                    <span>abc</span>
                    <span>(2021-05-28 11:11:11):</span>
                </div>
                <div class="txt" >hellohellohellohellohellohellohello</div>
            </div>
        </div>
        <div class="input-div" >
            <form action="" method="post">
                <input type="text" name="msg">
                <button>send</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
